<template>
	<div v-show="isLoadingShow" class="comp-loading">
		<div v-if="loadingType === loadingTypeArr[0]" class="loading-container loading-gif">
			<img src="//hh.ppdaicdn.com/static/images/common/loading.gif?v=1" alt="loading">
		</div>
		<div v-if="loadingType === loadingTypeArr[1]" class="loading-container loading-bubble">
			<div>
				<i></i>
				<i></i>
				<i></i>
				<i></i>
				<i></i>
				<i></i>
				<i></i>
				<i></i>
				<i></i>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		'name': 'comp-loading',
		data() {
			return {
				'loadingTypeArr': [
					'gif',
					'bubble'
				]
			};
		},
		'props': [
			'isShow',
			'type'
		],
		'computed': {
			isLoadingShow() {
				return !!this.isShow;
			},
			loadingType() {
				return this.$inArray(this.type, this.loadingTypeArr) ? this.type : this.loadingTypeArr[0];
			}
		}
	};
</script>

<style scoped type="text/scss">
	@keyframes loading {
		0% {
			box-shadow: 0 0 0 0.1em #ffffff;
		}
		50% {
			box-shadow: 0 0 0 0.3em #ffffff;
		}
		100% {
			box-shadow: 0 0 0 0.1em #ffffff;
		}
	}
	.comp-loading {
		position: relative;
		z-index: 100;
		width: 0;
		height: 0;
	}
	.loading-container {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: transparent;
	}
	.loading-gif {
		img {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 2em;
			margin: -1.7em;
			padding: 0.7em;
			border-radius: 0.5em;
			background-color: rgba(51,51,51,0.8);
		}
	}
	.loading-bubble {
		div {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 0;
			height: 0;
			&::before {
				content: "";
				position: absolute;
				top: -2em;
				left: -2em;
				width: 4em;
				height: 4em;
				border-radius: 0.5em;
				background-color: rgba(0,0,0,0.8);
			}
			i {
				position: absolute;
				width: 2px;
				height: 2px;
				margin: -1px;
				border-radius: 50%;
				background-color: #ffffff;
				&:nth-child(1) {
					top: -0.9em;
					left: -0.9em;
					animation: loading 0.72s -0.06s infinite;
				}
				&:nth-child(2) {
					top: -0.9em;
					left: 0;
					animation: loading 1.02s 0.25s infinite;
				}
				&:nth-child(3) {
					top: -0.9em;
					left: 0.9em;
					animation: loading 1.28s -0.17s infinite;
				}
				&:nth-child(4) {
					top: 0;
					left: -0.9em;
					animation: loading 1.42s 0.48s infinite;
				}
				&:nth-child(5) {
					top: 0;
					left: 0;
					animation: loading 1.45s 0.31s infinite;
				}
				&:nth-child(6) {
					top: 0;
					left: 0.9em;
					animation: loading 1.18s 0.03s infinite;
				}
				&:nth-child(7) {
					top: 0.9em;
					left: -0.9em;
					animation: loading 0.87s 0.46s infinite;
				}
				&:nth-child(8) {
					top: 0.9em;
					left: 0;
					animation: loading 1.45s 0.78s infinite;
				}
				&:nth-child(9) {
					top: 0.9em;
					left: 0.9em;
					animation: loading 1.06s 0.45s infinite;
				}
			}
		}
	}
</style>
